@keyframes iconAnim
{
    0%
    {
        transform: scale(0);
        transform: translateX(-41.2px);
        opacity: 0;
    }
    100%
    {
        transform: scale(1);
        transform: translateX(9px);
        opacity: 100;
    }
}
@keyframes iconAnim2
{
    0%
    {
        transform: scale(1);
        transform: translateX(9px);
        opacity: 100;
      
    }
    100%
    {
        transform: scale(0);
        transform: translateX(-31px);
        opacity: 0;
    }
}

@keyframes iconAnimI
{
    0%
    {
        transform: scale(0);
        transform: translateX(-41.2px);
        opacity: 0;
    }
    100%
    {
        transform: scale(1);
        transform: translateX(-140.12px);
        opacity: 100;
    }
}
@keyframes iconAnim2I
{
    0%
    {
        transform: scale(1);
        transform: translateX(-92.12px);
        opacity: 100;
      
    }
    100%
    {
        transform: scale(0);
        transform: translateX(-30px);
        opacity: 0;
    }
}
/* ICNOS POSITION */
.icontxt img
{
    width: 10%;

    animation-duration: 1.5s;
    animation-direction:normal;
    animation-iteration-count:1;
    /* The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count) */
    animation-fill-mode:forwards;


    position: absolute;
}

/* Extra small devices (phones, 400px and up) */
@media only screen and (min-width: 400px) {

    
    .iconO1txt img
    {
        top: 77%;
        left: 35%;
       
    }
    
    .icon02txt img
    {
        top: 29%;
        left: 39%;
       
    }
    
    .icon03txt img
    {
        top: 38%;
        left: 54%;
    
    }
    
    .icon06txt img
    {
        top: 2.5%;
        left: 71%;
       
    }
        
    .icon11txt img
    {
        top: 57%;
        left: 64%;
    
    }

}


/* Extra small devices (phones, 500px and up) */
@media only screen and (min-width: 500px) {

    
    .iconO1txt img
    {
        top: 77%;
        left: 32%;
       
    }
    
    .icon02txt img
    {
        top: 29%;
        left: 35%;
       
    }
    
    .icon03txt img
    {
        top: 38%;
        left: 50%;
    
    }
    
    .icon06txt img
    {
        top: 2.5%;
        left: 67%;
       
    }
        
    .icon11txt img
    {
        top: 57%;
        left: 60%;
    
    }

}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

    .iconO1txt img
    {
        top: 77%;
        left: 29%;
       
    }
    
    .icon02txt img
    {
        top: 29%;
        left: 31.1%;
       
    }
    
    .icon03txt img
    {
        top: 38%;
        left: 48%;
    
    }
    
    .icon06txt img
    {
        top: 2.5%;
        left: 64.5%;
       
    }
        
    .icon11txt img
    {
        top: 57%;
        left: 57.5%;
    
    }

}

/* Small devices (portrait tablets and large phones, 700px and up) */
@media only screen and (min-width: 700px) {

    .iconO1txt img
    {
        top: 77%;
        left: 27%;
       
    }
    
    .icon02txt img
    {
        top: 29%;
        left: 30%;
       
    }
    
    .icon03txt img
    {
        top: 38%;
        left: 46%;
    
    }
    
    .icon06txt img
    {
        top: 2.5%;
        left: 62.5%;
       
    }
        
    .icon11txt img
    {
        top: 57%;
        left: 54.5%;
    
    }

}


/* Small devices (portrait tablets and large phones, 768px and up) */
@media only screen and (min-width: 768px) {

    .iconO1txt img
    {
        top: 77%;
        left: 26%;
       
    }
    
    .icon02txt img
    {
        top: 29%;
        left: 28%;
       
    }
    
    .icon03txt img
    {
        top: 38%;
        left: 44%;
    
    }
    
    .icon06txt img
    {
        top: 2.5%;
        left: 61%;
       
    }
        
    .icon11txt img
    {
        top: 57%;
        left: 53.5%;
    
    }

}


/* Small devices (portrait tablets and large phones, 900px and up) */
@media only screen and (min-width: 900px) {

    .iconO1txt img
    {
        top: 77%;
        left: 25%;
       
    }
    
    .icon02txt img
    {
        top: 29%;
        left: 28%;
       
    }
    
    .icon03txt img
    {
        top: 38%;
        left: 43%;
    
    }
    
    .icon06txt img
    {
        top: 2.5%;
        left: 59.5%;
       
    }
        
    .icon11txt img
    {
        top: 57%;
        left: 52%;
    
    }

}


/* Small devices (portrait tablets and large phones, 992px and up) */
@media only screen and (min-width: 992px) {

    .iconO1txt img
    {
        top: 77%;
        left: 24%;
       
    }
    
    .icon02txt img
    {
        top: 29%;
        left: 26%;
       
    }
    
    .icon03txt img
    {
        top: 38%;
        left: 42%;
    
    }
    
    .icon06txt img
    {
        top: 2.5%;
        left: 59%;
       
    }
        
    .icon11txt img
    {
        top: 57%;
        left: 51.5%;
    
    }

}

/* Small devices (portrait tablets and large phones, 1200px and up) */
@media only screen and (min-width: 1200px) {

    .iconO1txt img
    {
        top: 77%;
        left: 22%;
       
    }
    
    .icon02txt img
    {
        top: 29%;
        left: 25%;
       
    }
    
    .icon03txt img
    {
        top: 38%;
        left: 40%;
    
    }
    
    .icon06txt img
    {
        top: 2.5%;
        left: 57.5%;
       
    }
        
    .icon11txt img
    {
        top: 57%;
        left: 49.5%;
    
    }

}


/*posición esculturas y carteles pantalla ordenador*/
.iconO1 img
{
    width: 6%;
    position: absolute;
    top: 71%;
    left: 24%;
}


.icon02 img
{
    width: 6%;
    position: absolute;
    top: 29%;
    left: 27%;

    z-index: 6;

}



.icon03 img
{
    width: 7%;
    position: absolute;
    top: 37%;
    left: 42%;
    
    z-index: 8;

}
/*
.icon03txt img
{
    top: 41%;
    left: 38%;
   
    width: 10%;

    z-index: 7;

}
*/
.icon04 img
{
    width: 6%;
    position: absolute;
    top: 5%;
    left: 38.5%;

    z-index: 9;
}
.icon04txt img
{
    top: 5%;
    left: 42.4%;
   
    width: 10%;

    z-index: 8;
}

.icon05 img
{
    width: 6%;
    position: absolute;
    top: 25%;
    left: 47%;

    z-index: 7;
}
.icon05txt img
{
    top: 29%;
    left: 50%;
   


    z-index: 6;
}

.icon06 img
{
    width: 6%;
    position: absolute;
    top: 2%;
    left: 56.5%;

    z-index: 7;
}
/*
.icon06txt img
{
    top: 2.5%;
    left: 55%;
   


    z-index: 6;
}
*/
.icon07 img
{
    width: 4%;
    position: absolute;
    top: 14%;
    left: 68%;

    z-index: 4;
}

.icon07txt img
{
    top: 17%;
    left: 70.4%;

    z-index: 3;
}

.icon08 img
{
    width: 6%;
    position: absolute;
    top: 38%;
    left: 66%;

    z-index: 8;
}

.icon08txt img
{
    top: 38%;
    left: 70.5%;

    z-index: 7;
}

.icon09 img
{
    width: 4%;
    position: absolute;
    top: 43%;
    left: 62.5%;

    z-index: 9;
}

.icon09txt img
{
    top: 43%;
    left: 64%;
   
    z-index: 8;

}

.icon10 img
{
    width: 4%;
    position: absolute;
    top: 55%;
    left: 66%;

    z-index: 7;
}

.icon10txt img
{
    top: 55%;
    left: 68%;
   
    z-index: 6;

}

.icon11 img
{
    width: 6%;
    position: absolute;
    top: 56%;
    left: 52%;

    z-index: 9;
}

.icon11txt img
{
    top: 63%;
    left: 50%;
   
    z-index: 8;

}

.iconActive img
{
    width: 8%;
    position: absolute;
}

.decoracion
{

    width: 8%;
    z-index: 1;

}


.canarias {

    position: absolute;
    left: 58.7%;
    top: 59%;
    width: 40%;
    border: solid 2px rgb(22, 180, 212);

}




.botP
{
 z-index: 3;
}

.botP:hover{
    transform: scale(1.3);
}

#colorlogo{
    background:rgb(0, 124, 249);
}
#mapa{
    border:rgb(2, 64, 123) 10px solid ;
    border-radius: 15px;
}